<template>
	<div>
		<div class="other-banner">
			<img src="../assets/image/casebanner.jpg">
		</div>
		<div class="case-box" style="padding-top: 40px;">
			<div class="search-box">
				<div class="search-title">
					<router-link tag='a' :to="'/index'" >首页</router-link> >
					<a>效果图</a>
				</div>
				<div class="search-li">
					<span>空间：</span>
					<ul class="search-type">
						<li @click="getSpace('0')" :class="[space == 0? 'cur': '']">全部</li>
						<li @click="getSpace(item.key)" v-for="(item, index) in spaceData" :class="[item.key == space? 'cur': '']" :key="index">{{item.value}}</li>
					</ul>
				</div>
				<div class="search-li">
					<span>风格：</span>
					<ul class="search-type">
						<li @click="getStyle('0')" :class="[style == 0? 'cur': '']">全部</li>
						<li @click="getStyle(item.key)" v-for="(item, index) in styleData" :class="[item.key == style? 'cur': '']" :key="index">{{item.value}}</li>
					</ul>
				</div>
				<div class="search-li">
					<span>户型：</span>
					<ul class="search-type">
						<li @click="getDoor('0')" :class="[door == '0'? 'cur': '']">全部</li>
						<li @click="getDoor(item.key)" v-for="(item, index) in doorData" :class="[item.key == door? 'cur': '']" :key="index">{{item.value}}</li>
					</ul>
				</div>
			</div>
      <div class="company-ad">
        <a target="_black" :href="item.url" class="ca-img" v-for="(item, index) in adData" :key="index">
          <img :src="item.image">
        </a>
      </div>
			<div class="wrap-imgcase">
				<div class="imgcase-box" v-for="(item, index) in caseData" :key="index" @click="goCase(item.schemeIndex)">
					<div class="cb-img">
						<img :src="item.layoutMap">
					</div>
					<div class="cd-text">
						<span class="cb-title">{{item.title}}</span>
						<span class="cb-sum">{{item.schemeImageCount}}张</span>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			
			<div class="page" style="text-align:center;margin-top:20px;" v-if="total >= pagelimit">
      	<el-pagination
      	  background
      	  layout="prev, pager, next"
      	  @current-change="handleCurrentChange"
      	  :page-size="pagelimit"
      	  :total="total">
      	</el-pagination>
    	</div>

		</div>
	</div>
</template>

<script>
export default {
  data () {
    return {
    	door: '0',
      doorData: [],
      space: '0',
      spaceData: [],
      style: '0',
      styleData: [],
      pageindex: 0,
      pagelimit: 16,
      total: '',
      caseData: [],
      adData: []
    }
  },
  methods: {
  	getType () {
  		var that = this
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 1
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.spaceData = res.data.items
  				}
  			})
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 2
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.styleData = res.data.items
  				}
  			})
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 3
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.doorData = res.data.items
  				}
  			})
  	},
    getCase () {
      var that = this
      that.$axios.request('/CompanyScheme/Index', {
        Address: that.$store.state.city,
        Space: that.space,
        Style: that.style,
        Door: that.door,
        Pageindex: that.pageindex,
  			Pagelimit: that.pagelimit
      })
        .then((res) => {
          if (res.code === 0) {
          	that.total = res.data.total
            that.caseData = res.data.datalist
          }
        })
    },
    goCase: function (id) {
      var that = this
      that.$axios.goCase(id)
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getCase()
    },
    getStyle: function(key) {
  		var that = this
  		that.style = key
  		that.getCase()
  	},
  	getDoor: function(key) {
  		var that = this
  		that.door = key
  		that.getCase()
  	},
  	getSpace: function(key) {
  		var that = this
  		that.space = key
  		that.getCase()
  	},
    getAd: function () {
      var that = this
      that.$axios.request('/AdvertInfo/GetAdvert', {
        Position: '3',
        Pageindex: 0,
        Pagelimit: 4
      })
        .then((res) => {
          if (res.code === 0) {
            that.adData = res.data.datalist
          }
        })
    }
  },
  mounted () {
    var that = this
  	that.getType()
    that.getAd()
    that.$axios.getCity(function(){
      that.getCase()
    })
  }
}
</script>
